<template>
  <div class="historypage tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>&nbsp;
      <div class="layoutBox" style="width:242px">
        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 : </span>&nbsp;
      <div class="layoutBox" style="width:120px">
        <el-select v-model="value" multiple collapse-tags placeholder="请选择" @change="selectChange">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button @click="addMonitoring = true"><i class="iconfont icon-tianjia" ></i>新增</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap">
      <div class="tablebox" style="height: 100%">
        <el-table
          :data="tableData"
          border
          height="100%"
          style="width: 100%">
          <el-table-column
            type="index"
            label='序号'
            :index="indexMethod"
            fixed
            width="50">
          </el-table-column>
          <el-table-column
            fixed
            type="selection">
          </el-table-column>
          <el-table-column
            prop="enclosure"
            fixed
            label='附件'
            width="131">
          </el-table-column>
          <el-table-column
            prop="dataType"
            fixed
            label='数据类型'
            width="131">
          </el-table-column>
          <el-table-column
            prop="name"
            label="监测时间">
            <el-table-column
              width="136"
              label="Ⅲ类标准限值">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="name"
            :label="item.label"
            v-if="item.isShow"
            v-for="(item,key) in tableHead" :key="key">
            <el-table-column
              width="132"
              :label="item.standard">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 手动监测新增弹窗 -->
    <el-dialog
      :visible.sync="addMonitoring"
      title="手动监测新增"
      width="708px">
      <div class="manual-monitoring clear">
        <el-scrollbar style="height: 100%">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="96px" class="demo-ruleForm">
            <div class="manual-row clear">
              <div class="manual-col" >
                <el-form-item label="站点名称 :" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="请输入站点名称"></el-input>
                </el-form-item>
              </div>
              <div class="manual-col">
                <el-form-item label="站点MN号 :" prop="MN">
                  <el-input v-model="ruleForm.MN" placeholder="请输入站点MN号"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="manual-row clear">
              <div class="manual-col" >
                <el-form-item label="数据类型 :" prop="dataType">
                  <!--<el-input v-model="ruleForm.dataType"></el-input>-->
                  <el-select v-model="ruleForm.dataType" placeholder="请选择">
                    <el-option
                      v-for="item in dataTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="manual-col">
                <el-form-item label="监测时间 :" prop="monitorTime">
                  <!--<el-input v-model="ruleForm.monitorTime"></el-input>-->
                  <el-date-picker
                    v-model="ruleForm.monitorTime"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </div>
            </div>
            <div class="factor-info">
              <div class="info-row clear">
                <div class="item">
                  <el-form-item label="监测项目 :" prop="waterTemF">
                    <el-input v-model="ruleForm.waterTemF"></el-input>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="监测值 :" prop="waterTemV">
                    <el-input-number controls-position="right" :min="0" v-model="ruleForm.waterTemV"></el-input-number>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label=" " prop="waterTemO">
                    <el-checkbox v-model="ruleForm.waterTemO">低于检出限（℃）</el-checkbox>
                  </el-form-item>
                </div>
              </div>
              <div class="info-row clear">
                <div class="item">
                  <el-form-item label="监测项目 :" prop="phF">
                    <el-input v-model="ruleForm.phF"></el-input>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="监测值 :" prop="phV">
                    <el-input-number controls-position="right" :min="0" v-model="ruleForm.phV"></el-input-number>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label=" " prop="phO">
                    <el-checkbox v-model="ruleForm.phO">低于检出限（无量纲）</el-checkbox>
                  </el-form-item>
                </div>
              </div>
              <div class="info-row clear">
                <div class="item">
                  <el-form-item label="监测项目 :" prop="dissolvedF">
                    <el-input v-model="ruleForm.dissolvedF"></el-input>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="监测值 :" prop="dissolvedV">
                    <el-input-number controls-position="right" :min="0" v-model="ruleForm.dissolvedV"></el-input-number>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label=" " prop="dissolvedO">
                    <el-checkbox v-model="ruleForm.dissolvedO">低于检出限（mg/L）</el-checkbox>
                  </el-form-item>
                </div>
              </div>
              <div class="info-row clear">
                <div class="item">
                  <el-form-item label="监测项目 :" prop="conductivityF">
                    <el-input v-model="ruleForm.conductivityF"></el-input>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="监测值 :" prop="conductivityV">
                    <el-input-number controls-position="right" :min="0" v-model="ruleForm.conductivityV"></el-input-number>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label=" " prop="conductivityO">
                    <el-checkbox v-model="ruleForm.conductivityO">低于检出限（μS/cm）</el-checkbox>
                  </el-form-item>
                </div>
              </div>
              <div class="info-row clear">
                <div class="item">
                  <el-form-item label="监测项目 :" prop="turbidityF">
                    <el-input v-model="ruleForm.turbidityF"></el-input>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="监测值 :" prop="turbidityV">
                    <el-input-number controls-position="right" :min="0" v-model="ruleForm.turbidityV"></el-input-number>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label=" " prop="turbidityO">
                    <el-checkbox v-model="ruleForm.turbidityO">低于检出限（NTU）</el-checkbox>
                  </el-form-item>
                </div>
              </div>
              <div class="info-row clear">
                <div class="item">
                  <el-form-item label="监测项目 :" prop="permanganateF">
                    <el-input v-model="ruleForm.permanganateF"></el-input>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="监测值 :" prop="permanganateV">
                    <el-input-number controls-position="right" :min="0" v-model="ruleForm.permanganateV"></el-input-number>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label=" " prop="permanganateO">
                    <el-checkbox v-model="ruleForm.permanganateO">低于检出限（mg/L）</el-checkbox>
                  </el-form-item>
                </div>
              </div>
              <div class="info-row clear">
                <div class="item">
                  <el-form-item label="监测项目 :" prop="ammoniaNitrogenF">
                    <el-input v-model="ruleForm.ammoniaNitrogenF"></el-input>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="监测值 :" prop="ammoniaNitrogenV">
                    <el-input-number controls-position="right" :min="0" v-model="ruleForm.ammoniaNitrogenV"></el-input-number>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label=" " prop="ammoniaNitrogenO">
                    <el-checkbox v-model="ruleForm.ammoniaNitrogenO">低于检出限（mg/L）</el-checkbox>
                  </el-form-item>
                </div>
              </div>
              <div class="info-row clear">
                <div class="item">
                  <el-form-item label="监测项目 :" prop="totalPhosphorusF">
                    <el-input v-model="ruleForm.totalPhosphorusF"></el-input>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="监测值 :" prop="totalPhosphorusV">
                    <el-input-number controls-position="right" :min="0" v-model="ruleForm.totalPhosphorusV"></el-input-number>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label=" " prop="totalPhosphorusO">
                    <el-checkbox v-model="ruleForm.totalPhosphorusO">低于检出限（mg/L）</el-checkbox>
                  </el-form-item>
                </div>
              </div>
              <div class="info-row clear">
                <div class="item">
                  <el-form-item label="监测项目 :" prop="totalNitrogenF">
                    <el-input v-model="ruleForm.totalNitrogenF"></el-input>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="监测值 :" prop="totalNitrogenV">
                    <el-input-number controls-position="right" :min="0" v-model="ruleForm.totalNitrogenV"></el-input-number>
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label=" " prop="totalNitrogenO">
                    <el-checkbox v-model="ruleForm.totalNitrogenO">低于检出限（mg/L）</el-checkbox>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="noticonsecondBtn" @click="addMonitoring = false">取 消</el-button>
        <el-button  @click="">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        dateRange: "",
        value:[1,2,3,4,5,6,7,8,9],
        optionData: [
          { value: 1, label: "水温", standard: "", isShow: true },
          { value: 2, label: "pH", standard: "6~9", isShow: true },
          { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
          { value: 4, label: "电导率", standard: "", isShow: true },
          { value: 5, label: "浊度", standard: "", isShow: true },
          { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
          { value: 7, label: "氨氮", standard: "1", isShow: true },
          { value: 8, label: "总磷", standard: "0.2", isShow: true },
          { value: 9, label: "总氮", standard: "", isShow: true }
        ],
        selectCheck: [], //选中的监测项目
        tableData: [{}],
        tableHead: [
          { value: 1, label: "水温", standard: "", isShow: true },
          { value: 2, label: "pH", standard: "6~9", isShow: true },
          { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
          { value: 4, label: "电导率", standard: "", isShow: true },
          { value: 5, label: "浊度", standard: "", isShow: true },
          { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
          { value: 7, label: "氨氮", standard: "1", isShow: true },
          { value: 8, label: "总磷", standard: "0.2", isShow: true },
          { value: 9, label: "总氮", standard: "", isShow: true }
        ],
        addMonitoring: false,//手动监测新增弹窗开关
        dataTypeOptions:[{//数据类型下拉框选项数据
          value: '1',
          label: '实验室分析'
        }],
        ruleForm:{//表单绑定数据
          name:'',
          MN:'',
          dataType:'',
          monitorTime:'',
          waterTemF:'水温',
          waterTemV:'',
          waterTemO:'',
          phF:'pH',
          phV:'',
          phO:'',
          dissolvedF:'溶解氧',
          dissolvedV:'',
          dissolvedO:'',
          conductivityF:'电导率',
          conductivityV:'',
          conductivityO:'',
          turbidityF:'浊度',
          turbidityV:'',
          turbidityO:'',
          permanganateF:'高锰酸盐',
          permanganateV:'',
          permanganateO:'',
          ammoniaNitrogenF:'氨氮',
          ammoniaNitrogenV:'',
          ammoniaNitrogenO:'',
          totalPhosphorusF:'总磷',
          totalPhosphorusV:'',
          totalPhosphorusO:'',
          totalNitrogenF:'总氮',
          totalNitrogenV:'',
          totalNitrogenO:''
        },
        rules:{//表达验证规则
          name: [
            { required: true, message: '请输入站点名称', trigger: 'blur' },
          ],
          MN: [
            { required: true, message: '请输入站点MN号', trigger: 'blur' },
          ],
        }
      };
    },
    created() {
      this.$store.commit("setShowlefttree", true);
      this.selectCheck = this.value;
      this.search();
    },
    methods: {
      selectChange(arr) {
        this.selectCheck = arr;
      },
      indexMethod(index) {
        return index + 1;
      },
      search() {
        for (let j in this.tableHead) {
          this.tableHead[j].isShow=false;
        }
        for (let i in this.selectCheck) {
          for (let j in this.tableHead) {
            if (this.selectCheck[i] == this.tableHead[j].value) {
              this.tableHead[j].isShow=true;
              break
            }
          }
        };
      }
    }
  };
</script>

<style scoped lang="less">
  .historypage {
    height: 100%;
  }
  .manual-monitoring{
    padding: 0 30px;
    height: 444px;
    .manual-col{
      float: left;
      width: 50%;
      padding: 0 10px 0 0;
    }
    .factor-info{
      .info-row{
        margin: 0 10px 10px;
        border: 1px solid #dce9fa;
        height: 46px;
        overflow: hidden;
        .item{
          float: left;
          width: 33%;
          &:first-child{
            width: 34%;
          }
          &:last-child{
            margin-left: -62px;
          }
        }

      }
    }
  }
</style>
